<template>
	<view class="content">
		<!-- 头部 -->
		<musicHead title="某云音乐" :icon="false"></musicHead>
		<!-- 搜索 -->
		<view class="container">
			<scroll-view scroll-y="true">
				<!-- 搜索 -->
				<view class="search" @tap="handleToSearch">
					<text class="iconfont icon-Magnifier"></text>
					<text>搜索歌曲</text>
				</view>
				<!-- 骨架屏加载 -->
				<view v-if="loading" style="margin-left: 20rpx;">
					<m-for-skeleton
					:avatarSize="200"
					:row="3"
					:loading="loading"
					isarc="square"
				    v-for="(item,key) in 4"
					:key="key"
					:titleStyle="{}"
					:title="false">
					</m-for-skeleton>
				</view>
				<!-- 内容 -->
				<view class="muscic_content" v-for="(item, index) in topList" :key="index" @tap="handleToList(item.id)" v-else>
					<view class="music_list_img">
						<image :src="item.coverImgUrl" mode=""></image>
						<text>{{ item.updateFrequency }}</text>
					</view>
					<view class="music_list_font">
						<text v-for="(ele, i) in item.tracks" :key="i">{{ i + 1 }}. {{ ele.first }} - {{ ele.second }}</text>
					</view>
				</view>
				
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import musicHead from "../../components/musicHead/musichead.vue"
	import mForSkeleton from "@/components/m-for-skeleton/m-for-skeleton";
	import { topList } from "../../common/api.js"
	export default {
		data() {
			return {
				topList: [],//头部榜单
				loading: true,
			}
		},
		components:{
			musicHead,
			mForSkeleton
		},
		onLoad() {
			//头部榜单
			topList().then(res => {
				if(res.length) {
					setTimeout(() => {
						this.topList = res;
						this.loading = false;
					},1000)
				}
			})
		},
		methods: {
			//跳转榜单详情页面
			handleToList(id) {
				uni.navigateTo({
					url:"/pages/list/list?id=" + id
				})
			},
			//去搜索页面
			handleToSearch() {
				uni.navigateTo({
					url:"/pages/search/search"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		.search {
			width: 90%;
			height: 80rpx;
			margin: 0 auto;
			background: #f8f8f8;
			border-radius: 38rpx;
			display: flex;
			align-items: center;
			color: #aeaeae;
			text {
				margin-left: 20rpx;
			}
		}
		
		.muscic_content {
			width: 90%;
			padding: 20rpx 0;
			margin: 0 auto;
			display: flex;
			.music_list_img {
				width: 240rpx;
				height: 240rpx;
				position: relative;
				flex: 30%;
				image {
					width: 100%;
					height: 100%;
					border-radius: 32rpx;
				}
				text {
					position: absolute;
					bottom: 15rpx;
					left: 15rpx;
					font-size: 28rpx;
					color: white;
				}
			}
			.music_list_font {
				flex: 70%;
				padding-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				//超出文本隐藏
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				text {
					font-size: 30rpx;
					color: #656565;
				}
			}
		}
	}
</style>
